<script>
import MyButton from './components/MyButton.vue';
import { shallowReactive } from 'vue';

export default{
    // data 用来指定实例对象中的响应式的属性
    data(){ 
        return{
            msg:"今天天气真好"
            
        }
    },
    /*
        methods 用来指定实例对象中的方法
            -它是一个对象，可以在它里边定义多个方法
            -这些方法最终会被挂载到组件实例上
            -可以直接通过组件实例来调用这些方法
            -所有组件实例上的属性都可以在模板中直接访问
            -methods中的函数的this会被自动绑定为组件实例
    */
    methods:{
        test(){
            alert("hahaha")
        },
        sum(a,b){
            return a+b
        },
        changeMsg(){
            this.msg = "不过我的心情不是很好"
        }
    }
}
</script>

<template>
    <h1 @click="test()">{{ msg }}</h1>
    <h2>{{ sum(2,5) }}</h2>
    <button @click="changeMsg()">点我一下</button>
</template>